<template>
  <div :class="eClass" @mouseenter="handleEnter">
    <div class="tip-content" :style="myStyle">
      <div class="arrow"></div>
      <slot name="content"></slot>
      <p>{{content}}</p>
    </div>
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  content: String,
  place: {
    type: String,
    default: 'top-left'
  },
  light: Boolean,
  width: Number
})
var mainSize = {}
var tipSize = {}
const handleEnter = (e) => {
  tipSize.height = e.target.firstChild.offsetHeight
  tipSize.width = e.target.firstChild.offsetWidth
  mainSize.height = e.target.offsetHeight
  mainSize.width = e.target.offsetWidth
  switch (props.place){
  case 'top-left':
    e.target.firstChild.style.bottom=`${mainSize.height+6}px`
    // e.target.firstChild.firstChild.style.left=`${3}px`
    break;
  case 'top':
    e.target.firstChild.style.bottom=`${mainSize.height+6}px`
    e.target.firstChild.style.left=`${mainSize.width/2-tipSize.width/2}px`
    e.target.firstChild.firstChild.style.left=`${tipSize.width/2-3}px`
    break;
  case 'top-right':
    e.target.firstChild.style.bottom=`${mainSize.height+6}px`
    break;
    // e.target.firstChild.firstChild.style.right=`6px`
  case 'left-top':
    e.target.firstChild.style.right=`${mainSize.width+6}px`
    break;
  case 'left':
    e.target.firstChild.style.right=`${mainSize.width+6}px`
    e.target.firstChild.style.top=`${mainSize.height/2-tipSize.height/2}px`
    e.target.firstChild.firstChild.style.top=`${tipSize.height/2-6}px`
    break;
  case 'left-bottom':
    e.target.firstChild.style.right=`${mainSize.width+6}px`
    break;
  case 'bottom-left':
    e.target.firstChild.style.top=`${mainSize.height+6}px`
    break;
  case 'bottom':
    e.target.firstChild.style.top=`${mainSize.height+6}px`
    e.target.firstChild.style.left=`${mainSize.width/2-tipSize.width/2}px`
    e.target.firstChild.firstChild.style.left=`${tipSize.width/2-3}px`
    break;
  case 'bottom-right':
    e.target.firstChild.style.top=`${mainSize.height+6}px`
    break;
  case 'right-top':
    e.target.firstChild.style.left=`${mainSize.width+6}px`
    break;
  case 'right':
    e.target.firstChild.style.left=`${mainSize.width+6}px`
    e.target.firstChild.style.top=`${mainSize.height/2-tipSize.height/2}px`
    e.target.firstChild.firstChild.style.top=`${tipSize.height/2-6}px`
    break;
  case 'right-bottom':
    e.target.firstChild.style.left=`${mainSize.width+6}px`
    break;
  }
  
}
const handleLeave = (e) => {
}
const myStyle = computed(()=>{
  return {
    width: props.width? `${props.width}px` : `auto`
  }
})
const eClass = computed(()=>{
  return [
    'e-tooltip',
    `place--${props.place}`,
    props.light ? 'bg--light' : ''
  ]
})
</script>
